<template>
	<div id="main">
		<div id="carmap"></div>

		<div class="input-card" v-show="mark">
			<h4>轨迹回放控制</h4>
			<div class="input-item">
				<button type="button" @click="ctrlAn(1)">开始动画</button>
				<button type="button" @click="ctrlAn(2)">暂停动画</button>
			</div>
			<div class="input-item">
				<button type="button" @click="ctrlAn(3)">继续动画</button>
				<button type="button" @click="ctrlAn(4)">停止动画</button>
			</div>
		</div>

		<div id="list">
			<div id="demo-header">
				<Input class="mr-10" placeholder="请输入车牌号" clearable v-model="queryData.code" style="width: 120px"/>
				<Col span="9">
                    <sele @ProvinceData="childByValue" v-show="false"></sele>
					<DatePicker v-model="query.currTime" format="yyyy/MM/dd" placement="bottom-end" placeholder="时间" style="width: 120px"></DatePicker>
                </Col>
				<Button class="mr-10" type="default" ghost custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
			</div>
			<div id="demo-list">
					<div class="list-info" v-for="idx in carlist" >
						<div class="text">{{idx.name}}</div>
						<div class="text">{{idx.code}}</div>
						<Button class="mr-10" type="primary"  size="small" @click='detile(idx.code)'>查看详情</Button>
					</div>
			</div>
			<div id="demo-page">
				<Page class="fr"  size="small" :total="queryData.totalRecord" :page-size="queryData.limit" :current="queryData.page" @on-change="changePage"  show-elevator show-total></Page>
			</div>
		</div>

	</div>

</template>

<script type="text/javascript">
import Request from "@/api/request.js";
import sele from "@/view/test/city.vue";
import global from '@/assets/js/global'
export default {
	components: {sele,},
	data () {
		return {
			carlist: [], 	// 车辆列表 
			map: null,		// a地图示例
			lineArr: [],	// 轨迹点位
			queryData: {	// 获取列表参数
				limit: 10,
				page: 1,
				totalRecord: 0,
				licensePlateNumber: '',
				sbType: 2
			},
			
			query: {	// 获取轨迹参数
				carMark: '',
				currTime: global.time(new Date())
			},
			mark: false,		// 车辆起始点位
			// passedPolyline:[], 	// 行进轨迹点位
		}
	},

	async mounted () {
		let area = window.defArea
		this.queryData.provid = area[0]
		this.queryData.cityid = area[1]
		this.queryData.distid = area[2]
		this.mapInit()
		this.getList()
	},
	methods: {
		// 获取列表
		async getList() {
			let res = (await Request('get',this.queryData,'gcDustbin')).data
			console.log('车辆列表',res);
			this.carlist = res.list
			this.queryData.totalRecord = res.totalRecord
			this.queryData.limit = res.pageSize
		},

		
		// 高德初始化地图
		mapInit() {
			this.map = new AMap.Map("carmap", {
				resizeEnable: true,
				zoom: 10
			});
		},

		// 查看详情
		detile (card) {
			// 9902571000477
			this.query.carMark = card
			// this.query.carMark = 9902571000477
			this.query.currTime = global.time(this.query.currTime)
			console.log(this.query);
			this.getDetaile()
		},


		// 获取车辆轨迹
		async getDetaile () {
			let res = (await Request('get',this.query,'ckCarGps/list')).data
			console.log('车辆轨迹',res);
			if(res.length == 0) {
				this.$Message.warning('暂无数据')
				this.map.clearMap()
				this.mark = false
				return
			}
			this.lineArr = res.map(item=> {
				let p = item.pos.split(',')
				return this.gd_convert_bd(p)
				return item.pos.split(',')
			})
			console.log('lineArr',this.lineArr);
			this.drowLine()
		},

		// 点位转换
		gd_convert_bd(coordinate){
			var bd_lng = coordinate[0];
			var bd_lat = coordinate[1];
			var pi = 3.14159265358979324 * 3000.0 / 180.0;
			var x = bd_lng - 0.0065;
			var y = bd_lat - 0.006;
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
			var gd_lng = z * Math.cos(theta);
			var gd_lat = z * Math.sin(theta);
			return [gd_lng,gd_lat];
		},

		// 绘制点位及轨迹
		async drowLine() {
			this.map.clearMap();	// 清除全部覆盖物
			this.map.setZoomAndCenter(18, this.lineArr[0]);
			this.mark = new AMap.Marker({    // 创建点标记
				position: this.lineArr[0],
				icon: "https://z3.ax1x.com/2021/04/22/cLVu9A.png",
				offset: new AMap.Pixel(-26, -13),
				autoRotation: true,
				angle:-90,
			});
			this.map.add(this.mark); 			// 点标记添加至地图
			this.mark.on('click',this.clickCar)	// 添加点击事件

			await new AMap.Polyline({	// 绘制轨迹
				map: this.map,
				path: this.lineArr,
				showDir:true,
				strokeColor: "#28f",   //线颜色
				strokeOpacity: 1,      //线透明度
				strokeWeight: 6,       //线宽
				strokeStyle: "solid",  //线样式
				lineJoin: 'round' 	   // 折线拐点连接处样式
			});
			

			let passedPolyline = new AMap.Polyline({
				map: this.map,
				// path: lineArr,
				strokeColor: "#af5",
				strokeWeight: 6,
				lineJoin: 'round'
			});
			this.mark.on('moving', e => {passedPolyline.setPath(e.passedPath);});
		},

		// 点击小车
		clickCar(e) {
			console.log(123);
			console.log(e);
		},

		ctrlAn(n) {
			var lineArr = this.lineArr
			switch(n) {
				case 1: this.mark.moveAlong(lineArr, 200);break;
				case 2: this.mark.pauseMove();break;
				case 3: this.mark.resumeMove();break;
				case 4: this.mark.stopMove();break;
			}
		},
		
		// 查询
		inQuire () {
			const that = this
			// sytotalApi.getPageList(that.queryData);
			that.queryData.totalRecord = undefined
			that.queryData.limit = 10
			that.queryData.page = 1
			that.getList()
		},
		// 换页
		changePage (page) {
		const that = this
			that.queryData.page = page
			that.getList()
		}

	},
  
}

</script>

<style lang="less" scoped>
.input-card {
	width: 200px;
	background: #fff;
	padding: 10px 15px;
	border-radius: 10px;
	overflow: hidden;
	position: absolute;
	bottom: 2vh;
	right: 1vw;
	z-index: 99;
	color: #333;
	box-shadow: 0 0 10px 2px #aaa;
	>div {
		width: 100%;
		display: flex;
		justify-content: space-between;
		>button {
			width: 47%;
			height: 25px;
			color: #25A5F7;
			border: 1px solid #25A5F7;
			border-radius: 50px;
			background: #fff;
			cursor: pointer;
			margin-top: 15px;
			&:hover {
				color: #fff;
				background: #25A5F7;
			}
		}
	}
}
	#main{
		width: 100%;
		height: 100%;
		position: relative;
	}
	#carmap {
	  width: 99%;
	  height: 99%;
	  z-index: 10;
	}
	#list{
		width: 350px;
		height: 600px;
		top: 100px;
		z-index: 100;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: #AAA9A9 3px 3px 3px;

		position: absolute;
		}
	#dian{
		position: absolute;
		width: 20px;
		height: 100px;
		top: 250px;
		left: 330px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #13C2C2;
		justify-content: space-around;
	}
	#demo-header{
		width: 100%;
		height: 10%;
		background-color: #2894FF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	#demo-list{
		width: 100%;
		height: 80%;

		/* background-color: #00FFFF; */
	}
	.list-info{
		width: 100%;
		height: 10%;
		font-weight:700 ;
		border-bottom: #F0F0F0 1px solid;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	.text{
		width: 27%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#demo-page{
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	dl,dt,dd,ul,li {
	  margin:0;
	  padding:0;
	  list-style:none;
	}
	p {
		font-size:12px;
	}
	dt {
	  font-size:14px;
	  font-family:"微软雅黑";
	  font-weight:bold;
	  border-bottom:1px dotted #000;
	  padding:5px 0 5px 5px;
	  margin:5px 0;
	}
	dd {
	  padding:5px 0 0 5px;
	}
	li {
	  line-height:28px;
	}
</style>
